<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '景区交通',
  },
}
</route>

<script lang="ts" setup>
// #ifdef MP-WEIXIN
// 微信小程序使用新的API
const systemInfo = uni.getWindowInfo()
const top = systemInfo.safeArea?.top ?? null
// #endif

function back() {
  uni.navigateBack()
}

const backImg = ref('https://m.360buyimg.com/i/jfs/t1/306136/5/15674/110093/686777b2F2aac0155/a1b9c1b5ef5807c1.jpg')

const date = ref('')

onMounted(() => {
  const currentDate = new Date()
  const year = currentDate.getFullYear()
  const month = (currentDate.getMonth() + 1).toString().padStart(2, '0')
  const day = currentDate.getDate().toString().padStart(2, '0')
  date.value = `${year}年${month}月${day}日`
})

const trafficList = ref([
  {
    name: '小火车成人票（当日不限次）',
    time: '09:30-21:00',
    price: '50',
  },
  {
    name: '游船成人票',
    time: '09:30-17:00',
    price: '55',
  },
  {
    name: '包船（日间）：700元/小时/6人',
    time: '09:30-17:00',
    price: '700',
  },
  {
    name: '包船（夜间）：980',
    time: '17:30-21:00',
    price: '980',
  },
])

// 初始化 value 数组，每个元素对应 trafficList 中一项的数量，初始值为 0
const value = ref<number[]>(trafficList.value.map(() => 0))

console.log(value.value)

function handleChange(val: number, index: number) {
//   console.log(value.value)
}

// 计算总价
const totalPrice = computed(() => {
  return trafficList.value.reduce((sum, item, index) => {
    return sum + Number(item.price) * value.value[index]
  }, 0)
})

// 勾选状态
const isAgreed = ref(false)
// 切换勾选状态
function toggleAgreement() {
  isAgreed.value = !isAgreed.value
}

function goAgree() {
    const url = '/pages/agreement/userAgreement'
  const name = '订票须知'
  uni.navigateTo({
    url: `/pages/agreement/userAgreement?name=${name}`,
    success: (res) => {
      res.eventChannel.emit('acceptDataFromOpenerPage', { name })
    },
  })
}

function pay() {
  if (!isAgreed.value) {
    uni.showToast({
      title: '请先勾选并同意相关条款',
      icon: 'none',
    })
  }
}
</script>

<template>
  <!-- 导航栏 -->
  <view class="fixed top-0 z-20 w-full transition-all duration-300">
    <view :style="{ height: `${top}px` }" />
    <view class="h-11 flex items-center px-30rpx">
      <wd-icon name="thin-arrow-left" size="22px" color="white" @click="back" />
      <h1 class="flex-1 truncate px-6 text-lg text-white font-medium">
        景区交通
      </h1>
    </view>
  </view>
  <!-- 背景图 -->
  <image class="relative z-[-1] h-460rpx w-full" :src="backImg" mode="aspectFill" />
  <!-- 间隔占位 -->
  <view class="relative z-5 mt-[-36rpx] rounded-3xl bg-white px-20rpx py-40rpx">
    <view class="flex justify-between">
      <view class="text-28rpx">
        选择票型
      </view>
      <view class="flex items-center text-26rpx text-#f7001e">
        <wd-icon name="warning" size="30rpx" /><view class="ml-1">
          限制当天使用：{{ date }}
        </view>
      </view>
    </view>
    <!-- 交通方式区 -->
    <view class="mt-50rpx">
      <view v-for="(item, index) in trafficList" :key="index" style="border: 2rpx solid #d9c6b6" class="mb-30rpx rounded-lg px-30rpx py-36rpx">
        <view class="text-32rpx font-bold">
          {{ item.name }}
        </view>
        <view class="mt-15rpx w-180rpx flex items-center justify-center rounded-2xl bg-#fff2ea py-5rpx text-24rpx text-#be9f85">
          {{ item.time }}
        </view>
        <view class="mt-30rpx flex justify-between">
          <view class="flex items-end">
            ￥ <view class="text-38rpx">
              {{ item.price }}
            </view>.00
          </view>
          <wd-input-number v-model="value[index]" :min="0" :max="10" @change="handleChange" />
        </view>
      </view>
    </view>
  </view>
  <!-- 占位 -->
  <view class="h-200rpx" />
  <!-- 底部支付栏 -->

  <view
    class="fixed bottom-0 z-6 box-border w-100vw flex flex-col items-start rounded-tl-2xl rounded-tr-2xl bg-white px-20rpx py-40rpx"
    style="box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);"
  >
    <!-- 同意条款区域 -->
    <view class="flex items-center justify-center">
      <view class="flex">
        <view
          class="mr-3 h-4 w-4 flex items-center justify-center border border-gray-300 rounded"
          :class="{ 'bg-[#212121] border-[#212121]': isAgreed }"
          style="border: 2rpx solid gray"
          @click="toggleAgreement"
        >
          <text v-if="isAgreed" class="text-white">
            ✓
          </text>
        </view>
        <view class="text-[28rpx] text-gray-400">
          本人已阅读并同意
        </view>
      </view>
      <view class="text-[28rpx] text-[#ceb09e]" @click="goAgree">
        《订票须知》
      </view>
    </view>
    <!-- 购买按钮 -->
    <view
      class="mt-20rpx w-100% flex items-center justify-center rounded-lg bg-[linear-gradient(to_right,#e0cebd,#bfa189)] py-20rpx text-white"
      @click="pay"
    >
      立即购买
      <view class="ml-10rpx flex items-end text-26rpx">
        ￥<view class="text-32rpx">
          {{ totalPrice }}
        </view>.00
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>
